<template>
<view class="home">
	<u-navbar
		ref="navbar" class="u-navbar"
		:z-index="99999"
		back-icon-name="arrow-leftward" 
		title=" "
		:is-back="false"
		:border-bottom="false"
		:is-fixed="false"
		:background="{
			backgroundColor:'#5C77FF',
		}"
		back-icon-color="#ffffff">
		<view class="container">
			<view class="search" @click="goToPage('/pages/search/search')">
				<u-icon
					class="u-icon"
					name="search" size="35" color="#828282">
				</u-icon>
				项目名称/负责人/类型
			</view>
			<view class="message">
				<view>
					<u-icon 
						class="u-icon"
						name="chat" size="55" color="#FFFFFF">
					</u-icon>
					<!-- <uni-badge text="3" type="error" size="small">
					</uni-badge> -->
				</view>
			</view>
		</view>
	</u-navbar>
	<view class="title">重点项目建设概况</view>
	<view class="content">
		<view class="xmzs">
			<XmzsCp></XmzsCp>
		</view>
		<view class="hyzb">
			<HyzbCp></HyzbCp> 
		</view> 
		<view class="chart_container">
			<view class="left">
				<TwoChartCp></TwoChartCp>
			</view>
			<view class="right">
				<ThreeChartCp></ThreeChartCp>
			</view>
		</view>
		<view class="xmdt" v-if="dataList[0] && dataList[0].id">
			<XmdtCp :dataList="dataList"></XmdtCp>
		</view>
		<view class="content_item">
			<view class="content_item_left" style="margin-right: 10px;" @click="goToPage('/pages/project_gk/project_gk')">
				<view class="radius">
					
				</view>
				<view class="project_gk">项目概况</view>
			</view>
			<view class="content_item_centre" style="margin-right: 10px;" @click="goToPage('/pages/summery/index')">
				<view class="radius">
					
				</view>
				<view class="project_gk">月度汇总</view>
			</view>
			<view class="content_item_centre" style="margin-right: 10px;" @click="goToPage('/pages/wttb/wttb')">
				<view class="radius">
					
				</view>
				<view class="project_gk">问题填报</view>
			</view>
			<view class="content_item_right" @click="goToPage('/pages/zcwj/zcwj')">
				<view class="radius">
					
				</view>
				<view class="project_gk">政策文件</view>
			</view>
		</view>
		
		<view class="xjxm">
			<u-button 
				class="u-button"
				@click="goToPage('/pages/newProject/newProject')"
				:ripple="true"
				:hair-line="false"
				:custom-style="{
					color:'#ffffff',
					backgroundColor:'#5c77ff',
					fontSize:'20px',
					padding:'20px'
				}">
				<u-icon 
					class="u-icon"
					name="plus-circle"
					:custom-style="{
						marginRight:'10px',
					}">
				</u-icon>
				新建项目
			</u-button>
		</view>
	</view>
</view>
</template>

<script>
	import XmzsCp from "@/components/home/Xmzs.vue";
	import HyzbCp from "@/components/home/Hyzb.vue";
	import XmdtCp from "@/components/home/Xmdt.vue";
	import TwoChartCp from "@/components/home/TwoChart.vue";
	import ThreeChartCp from "@/components/home/ThreeChart.vue";
	export default {  //首页
		components:{XmzsCp,HyzbCp,XmdtCp,TwoChartCp,ThreeChartCp},
		data() {
			return {
				dataList:[],
			};
		},
		mounted(){
			this.getProjectTrends();
		},
		onPullDownRefresh() {
			this.getProjectTrends();
		},
		methods:{
			goToPage(url){  //跳转到指定页面
				uni.navigateTo({
				    url: url,
				});
			},
			getProjectTrends(){  //获取数据
				this.$ajax({
					url: '/wx/index/news',
					method: 'POST',
					success: res => {
						this.dataList = res.data.data;
					},
					complete(){
						uni.stopPullDownRefresh();	//得到数据后停止下拉刷新
					},
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
.home{
	display: flex;
	flex-direction: column;
	position: relative;
	.u-navbar{
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 9999;
	}
	.container{
		width: 100%;
		padding-left:15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		z-index: 999;
		.search{
			flex: 3;
			width: 0;
			display: flex;
			flex-direction: row;
			background-color: #ffffff; 
			justify-content: flex-start;
			align-items: center;
			border-radius: 15px;
			box-sizing: border-box;
			padding: 3px 10px;
			height: 30px;
			font-size: 12px;
			color: #808080;
			>.u-icon{
				margin-right: 5px;
			}
		}
		.message{
			flex: 1;
			width: 0;
			>view{
				display: flex;
				flex-direction: row;
				justify-content:center;
				align-items: center;
				>.uni-badge{
					position: absolute;
					transform: translate(50%,-50%);
				}
			}
		}
	}
	.title{
		font-size: 23px;
		font-weight: bold;
		text-align: center;
		color: white;
		height: 50px;
		line-height: 50px;
		width: 100%;
		background-color: #5C77FF;
		text-shadow: -5px 5px 0 #4f66dd;
		letter-spacing: 1px;
	}
	.content{
		width: 100vw;
		padding: 10px;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 10px;
		z-index: 0;
		.content_item{
			display: flex;
			flex-direction: row;
			height: fit-content;
			>view{
				flex: 1;
				width: 0;
				min-height: 110px;
				border-radius: 5px;
			}
			>.content_item_left{
				
				background-color: #5FACFF;
				position: relative;
				.radius{
					position: absolute;
					height: 65px;
					width: 65px;
					border-radius: 50%;
					left: 50%;
					top: 40%;
					transform: translate(-50%,-50%);
					background-image: url(../../static/xmgk.png);
					background-repeat: no-repeat;
					background-size: 70%;
					background-position: 50%;
					background-color: #499EFF;
				}
				.project_gk{
					position: absolute;
					bottom: 8%;
					color: #fff;
					text-align: center;
					width: 100%;
				}
			}
			>.content_item_centre{
				background-color: #FFA869;
				position: relative;
				.radius{
					position: absolute;
					height: 65px;
					width: 65px;
					border-radius: 50%;
					left: 50%;
					top: 40%;
					transform: translate(-50%,-50%);
					background-image: url(../../static/wttb.png);
					background-repeat: no-repeat;
					background-size: 55%;
					background-position: 50%;
					background-color: #FF964E;
				}
				.project_gk{
					position: absolute;
					bottom: 8%;
					color: #fff;
					text-align: center;
					width: 100%;
				}
			}
			>.content_item_right{
				background-color: #B398FE;
				position: relative;
				.radius{
					position: absolute;
					height: 65px;
					width: 65px;
					border-radius: 50%;
					left: 50%;
					top: 40%;
					transform: translate(-50%,-50%);
					background-image: url(../../static/zcwj.png);
					background-repeat: no-repeat;
					background-size: 65%;
					background-position: 50%;
					background-color: #9A78FB;
				}
				.project_gk{
					position: absolute;
					bottom: 8%;
					color: #fff;
					text-align: center;
					width: 100%;
				}
			}
		}
		.xjxm{
			width: 100%;
		}
		.chart_container{
			display: grid;
			grid-template-columns: 1fr 1fr;
			height: 200px;
			border-radius: 5px;
			>.left{
				flex: 1;
				overflow: hidden;
			}
			>.right{
				flex: 1;
				overflow: hidden;
			}
		}
	}
}
</style>
